<!DOCTYPE html>
<html>
	<head>
		<!-- 为机器提供信息的 -->
		<meta charset="utf-8">
		<title>饿了么</title>
		<style type="text/css">
		 #div1{
			 /* 容器盒子 */
			 /* 默认情况采用流式布局 */
			 display: flex;
			 flex-direction: column;
		 }
		 .c1{
			 width: 100px;
			 height: 100px;
			 background-color: pink;
		 }
		</style>
	</head>
	<body>
		<div id="div1">
			<div class="c1">
				111
			</div>
			<div class="c1">
				222
			</div>
			<div class="c1">
				333
			</div>
			<div class="c1">
				444
			</div>
			<div class="c1">
				55
			</div>
		</div>

	</body>
</html>
